<template>
  <van-popup
    v-model:show="show"
    position="center"
    round
    :close-on-click-overlay="false"
    class="org-selector-popup"
  >
    <div class="org-selector">
      <div class="org-selector-header">
        <h3>选择要进入的组织</h3>
      </div>
      
      <div class="org-list">
        <div
          v-for="(org, index) in orgList"
          :key="org.orgId"
          class="org-item"
          :class="{ 'active': selectedOrg?.orgId === org.orgId }"
          @click="selectOrg(org)"
        >
          <div class="org-info">
            <div class="org-name">{{ org.orgName }}</div>
            <div class="org-code">编码: {{ org.orgCode }}</div>
          </div>
          <div class="org-status" v-if="org.latestLogin === 2">
            <span class="last-login">上次的登录的组织</span>
          </div>
          <van-icon name="success" v-if="selectedOrg?.orgId === org.orgId" class="check-icon" />
        </div>
      </div>
      
      <div class="org-selector-footer">
        <van-button
          type="primary"
          block
          round
          :disabled="!selectedOrg"
          @click="confirmSelection"
          class="confirm-btn"
        >
          确定
        </van-button>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  orgList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'confirm'])

const show = ref(false)
const selectedOrg = ref(null)

// 监听 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  show.value = newVal
  if (newVal && props.orgList.length > 0) {
    // 默认选择上次登录的组织
    const lastLoginOrg = props.orgList.find(org => org.latestLogin === 2)
    selectedOrg.value = lastLoginOrg || props.orgList[0]
  }
})

// 监听 show 变化
watch(show, (newVal) => {
  emit('update:modelValue', newVal)
})

// 选择组织
const selectOrg = (org) => {
  selectedOrg.value = org
}

// 确认选择
const confirmSelection = () => {
  if (selectedOrg.value) {
    emit('confirm', selectedOrg.value)
    show.value = false
  }
}
</script>

<style scoped>
.org-selector-popup {
  width: 90%;
  max-width: 400px;
}

.org-selector {
  padding: 20px;
}

.org-selector-header {
  text-align: center;
  margin-bottom: 20px;
}

.org-selector-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #323233;
}

.org-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.org-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  margin-bottom: 10px;
  background: #f7f8fa;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.org-item:hover {
  background: #e8f4ff;
}

.org-item.active {
  background: #e8f4ff;
  border-color: #1989fa;
}

.org-info {
  flex: 1;
}

.org-name {
  font-size: 16px;
  font-weight: 500;
  color: #323233;
  margin-bottom: 4px;
}

.org-code {
  font-size: 12px;
  color: #969799;
}

.org-status {
  margin-right: 10px;
}

.last-login {
  font-size: 12px;
  color: #07c160;
  background: #f0f9ff;
  padding: 2px 8px;
  border-radius: 4px;
}

.check-icon {
  color: #1989fa;
  font-size: 18px;
}

.org-selector-footer {
  padding-top: 10px;
}

.confirm-btn {
  height: 44px;
  font-size: 16px;
  font-weight: 500;
}
</style>
